<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path;
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh">
<link href="<%=path%>/bootstrap/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="<%=path%>/bootstrap/js/jquery-3.4.1.js"></script>
<head>
<meta charset="UTF-8">
<title>注册</title>
</head>
<body>
<div class="container">
		<form action="<%=path%>/register.do" name="myForm" method="post" onsubmit="return checkForm()">
			账    号：<input id="account" name="account" value="" type="text" >
			密    码：<input id="password" name="password" value="" type="password">
			用户名：<input name="name" value=""  type="text">
			性    别：
			<div>
				<label><input type="radio" name="sex" value="男">男</label>
				<label><input type="radio" name="sex" value="女">女</label>
				<label><input type="radio" name="sex" value="？">？</label>
			</div>
			年    龄:<input name="age" value="" type="text">
			电   话:<input name="tel" value="" type="text" size="11">
			
			<input type="submit" value="注册"><input type="reset" value="重置">
			<font id="error" color="red">${error}</font>
		</form>
		
	</div>
</body>
<style type="text/css">
	body {
		background-image: url("<%=path%>/image/background2.jpg");
		background-attachment: fixed;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 100%
	}
	
	form {
		margin-top:200px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
</style>


<script type="text/javascript">
	function checkForm(){
		var account=document.getElementById("account").value;
		var password=document.getElementById("password").value;
		var name=document.getElementById("name").value;
		var tel=document.getElementById("tel").value;
		
		if(account == null || account == ""){
			document.getElementById("account").innerHTML =  "账号不为空";
			return false;
		}
		if(password == null || password == "") {
			document.getElementById("error").innerHTML =  "密码不为空";
			return false;
		}
		if(name == null || name == "") {
			document.getElementById("error").innerHTML =  "用户名不为空";
			return false;
		}
		if(password == null || password == "" || !/^1[34578]\d{9}$/.test(tel)) {
			document.getElementById("error").innerHTML =  "手机号格式不正确";
			return false;
		}
		
		return true;
	}
</script>
</html>